<template>
  <div class="songlist" style="height: 100%">
    <el-row :gutter="24" style="height: 100%">
      <!-- 左侧图片 -->
      <el-col :span="12" style="height: 100%">
        <div class="grid-content bg-purple" style="height: 100%">
          <div class="leftimg">
            <img :src="backimg" alt="" />
          </div>
          <div class="topimg">
            <img :src="backimg" alt="" />
          </div>
        </div>
      </el-col>
      <!-- 右侧歌单 -->
      <el-col :span="12">
        <div class="grid-content bg-purple songlistall">
          <h1>{{ songlistName }}</h1>
          <h2 class="shenglue">{{ songlistdescribe }}</h2>
          <div class="list">
            <div class="listone" v-for="(item, i) in list" :key="i">
              <a href="#" @click.prevent="playmusic(item.id)">
                <span v-if="i < 9"> 0{{ i + 1 }} </span>
                <span v-else>{{ i + 1 }}</span>
                、 歌曲:《{{ item.al.name }}》 歌手：
                <span v-for="(v, j) in item.ar" :key="j">
                  {{ v.name }}
                </span>
              </a>
            </div>
          </div>
          <div class="Creator">
            歌单作者：{{ songCreator.nickname }} <br /><br />
            <p class="shenglue">{{ songCreator.signature }}</p>
          </div>
        </div>
        <!-- 类似歌单推荐 -->
        <div>
          <h1 class="othersonglisth1">类似歌单推荐</h1>
          <div v-for="(item, i) in others" :key="i" class="othersonglist">
            <img :src="item.picUrl" alt="" />
            <p>
              <a href="#" @click.prevent="getothers(item.id)">{{
                item.name
              }}</a>
            </p>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// otherlist接口废弃
import { getplaylist, otherlist } from "../../api/dj";
import { getPersonalized } from "../../api/home";
export default {
  data() {
    return {
      songlist: {},
      songCreator: { nickname: "", signature: "" },
      songlistName: "",
      songlistdescribe: "",
      backimg: "",
      others: [],
      arr: [],
      list: [],
    };
  },
  computed: {},
  watch: {},

  methods: {
    // 初始化
    async init() {
      // 获取歌单详情
      const result = await getplaylist({ id: this.$route.params.id });
      this.songlist = result.playlist;
      this.songCreator.nickname = this.songlist.creator.nickname;
      this.songCreator.signature = this.songlist.creator.signature;
      this.list = this.songlist.tracks.slice(0, 10);
      this.songlistName = this.songlist.name;
      this.songlistdescribe = this.songlist.description;
      this.backimg = this.songlist.coverImgUrl;
      // 相关歌单推荐
      const result1 = await getPersonalized();
      for (let i = 0; i < 5; i++) {
        this.getrandom();
      }
      this.arr.forEach((v, i) => {
        this.others.push(result1.result[v]);
      });
      console.log(result1);
      console.log("987", this.others);
    },
    getrandom() {
      let j = Math.floor(Math.random() * (29 - 1 + 1)) + 1;
      if (this.arr.every((v) => v != j)) {
        this.arr.push(j);
      } else {
        this.getrandom();
      }
    },
    // 跳转播放界面
    playmusic(id) {
      this.$router.push("/home/play/" + id);
    },
    getothers(id) {
      this.$router.push("/home/dj/" + id);
      this.$router.go(0);
    },
  },
  created() {
    this.init();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
.shenglue {
  display: inline-block;
  white-space: nowrap;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.leftimg {
  height: 100%;
  filter: blur(5px);
  width: 50%;
}
.leftimg img {
  height: 100%;
}
.topimg {
  position: absolute;
  top: 20%;
  left: 20%;
  border: 1px solid #fff;
}
.topimg img {
  width: 300px;
}
.songlistall {
  width: 100%;
}
.songlistall h1 {
  color: #69b1a2;
  font-size: 26px;
}
.songlistall h2 {
  margin-top: 20px;
  font-size: 20px;
  color: #e79c25;
  font-weight: 700;
}
.list {
  text-align: left;
}
.listone {
  margin-top: 30px;
}
.listone a {
  color: #000;
}
.list a:hover {
  color: #f00;
}
.Creator {
  margin-top: 20px;
  text-align: left;
}
.othersonglisth1 {
  margin-top: 20px;
  text-align: left;
  padding-left: 45px;
}
.othersonglist {
  float: left;
  width: 20%;
  text-align: center;
  margin-top: 20px;
}
.othersonglist img {
  width: 50%;
}
.othersonglist p {
  font-size: 14px;
}
.othersonglist a {
  color: #69b1a2;
}
</style>
